<template>
  <div>
    <el-popover v-model="flag" placement="bottom" width="450" trigger="click">
      <div slot="reference" style="cursor: pointer">
        <el-input
          v-model="name"
          style="position: relative;"
          :size="size"
          clearable
          :placeholder="placeholder"
          @input.native="filterIcons"
        >
          <svg-icon v-show="iconList.length" slot="prefix" :icon-class="logoValue || 'el-icon-search'" :size="14" />
        </el-input>
      </div>
      <!-- 选择图标 -->
      <div v-if="iconList.length" class="iconList">
        <svg-icon v-for="(item, index) in iconList" :key="index" class="icons" :icon-class="item" @setIcon="setIcon" />
      </div>
      <el-empty v-else description="没有更多了~" />
    </el-popover>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  props: {
    logoValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '输入图标名称搜索'
    }
  },
  data() {
    return {
      flag: false,
      iconList: []
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    },
    name: {
      get() {
        return this.logoValue
      },
      set(val) {
        this.$emit('update:logoValue', val)
      }
    }
  },
  mounted() {
    this.iconList = icons
  },
  methods: {
    filterIcons() {
      if (!this.flag) this.flag = true
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    setIcon(row) {
      this.flag = !this.flag
      this.$emit('update:logoValue', row.icon.replace('#icon-', '') + (row.flag ? '' : '.svg'))
    }
  }
}
</script>

<style lang="scss" scoped>
.iconList {
  width: 430px;
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;

  .icons {
    width: 58px;
    height: 45px;
    color: #000000;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    margin: 5px;

    &:hover {
      color: rgb(184, 62, 62);
      border-color: rgb(148, 46, 46);
    }
  }
}

::v-deep .el-input__prefix div {
  height: inherit;
  display: flex;
  align-items: center;
}
</style>
